import './App.css';
import React,{Suspense,lazy} from "react"
import {
  Routes,
  Route
} from "react-router-dom"
import Header from "./components/header"
import Footer from "./components/footer"
import Loading from "./components/Loading"

// 路由懒加载
const Home = lazy(()=>import("./pages/home.js"))
const History = lazy(()=>import("./pages/history.js"))
const Login = lazy(()=>import("./pages/Login"))
const Register = lazy(()=>import("./pages/register"))

function App() {
  return (
    <div className="App">
      <Header/>
      <main>
        {/* 懒加载前的Loading动画 */}
        <Suspense fallback={<Loading/>}> 
          <Routes>
            <Route path="/" exact element={<Home/>}></Route>
            <Route path="/history" exact element={<History/>}></Route>
            <Route path="/login" exact element={<Login/>}></Route>
            <Route path="/register" exact element={<Register/>}></Route>
          </Routes>
        </Suspense>
      </main>
      <Footer/>
    </div>
  );
}

export default App;
